import React from "./react";
import ReactDOM from "./react-dom";
let ThemeContext = React.createContext();
console.log("ThemeContext---------->", ThemeContext);

const withLoading = (OldComponent) => {
  return class extends React.Component {
    show = () => {
      let loading = document.createElement("div");
      loading.innerHTML = `<p id='loading' style='position:absolute;top:100px;background-color:gray;'>loading</p>`;
      document.body.appendChild(loading);
    };
    hide = () => {
      document.getElementById("loading").remove();
    };
    render() {
      return <OldComponent {...this.props} show={this.show} hide={this.hide} />;
    }
  };
};

@withLoading
class Panel extends React.Component {
  render() {
    return (
      <div>
        <button onClick={this.props.show}>show</button>
        <button onClick={this.props.hide}>hide</button>
      </div>
    );
  }
}
let LoadingPanel = withLoading(Panel);

let element = React.createElement(LoadingPanel, { name: "zhufeng" });

ReactDOM.render(element, document.getElementById("root"));
